<template>
    <div class="scene">
        <div id="div3d"></div>
        <div id="div2d"></div>
    </div>
</template>

<script lang="ts" setup>
// 1.初始化三维容器
const initScene = async () => {
    window.app = await window.TiIns.createContainer({
        container: 'div3d',
        background: '#000000',
    });
    // 2.加载三维场景
    loadCampus();
};
// 加载场景
const loadCampus = () => {
    window.campusManagerIns = window.TiIns.CampusManager({
        app: window.app, // THINGJS实例
        core: window.TiIns.Core, // 核心实例
        sceneCode: '30de2861-5736-4b7f-8127-162496bf78e7',
        flyToSetting: true, // 园区，建筑，楼层默认飞到设置视角 - 默认true
        initChildScene: false, // 加载主场景时是否加载子场景 默认false
        loadProgress: (val: number) => {
            // 加载进度，可用于加载进度条
            console.log('加载进度', val);
        },
        childSceneBeginLoad: () => {
            console.log('子场景开始加载');
        },
        childSceneLoaded: () => {
            console.log('子场景加载完毕');
        },
        sceneLoaded: async (campus: any) => {
            console.log('主场景加载完毕', window.campusManagerIns);
            // 层级切换
            window.app.level.change(campus);
        },
    });
};
onMounted(() => {
    initScene();
});
</script>

<style lang="scss" scoped>
.scene {
    width: 100%;
    height: 100%;
    overflow: hidden;

    #div3d {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
    }

    #div2d {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        overflow: auto;
        width: 1920px;
        height: 1080px;
        margin: 0;
        pointer-events: none;
    }
}
</style>
